<%--
  Created by IntelliJ IDEA.
  User: chenchunyin
  Date: 2025/7/1
  Time: 9:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>健康食品</title>
  <style>
    :root {
      --primary-green: #4CAF50;
      --light-green: #81C784;
      --lighter-green: #C8E6C9;
      --green-bg: #F5F9F5;
      --dark-green: #2E7D32;
      --text-color: #333;
      --light-text: #666;
      --white: #fff;
      --shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: var(--green-bg);
      color: var(--text-color);
      margin: 0;
      padding: 20px;
      line-height: 1.6;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .page-title {
      color: var(--dark-green);
      text-align: center;
      margin-bottom: 30px;
      font-size: 1.8rem;
    }

    .products-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 25px;
    }

    .product-card {
      background: var(--white);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: transform 0.3s ease;
    }

    .product-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .product-image {
      width: 100%;
      height: 180px;
      object-fit: cover;
      border-bottom: 1px solid #eee;
    }

    .product-info {
      padding: 18px;
    }

    .product-name {
      font-weight: 600;
      color: var(--dark-green);
      margin-bottom: 10px;
      font-size: 1.2rem;
    }

    .product-description {
      color: var(--light-text);
      font-size: 0.95rem;
      margin-bottom: 15px;
      line-height: 1.5;
    }

    .nutrition-info {
      background-color: var(--green-bg);
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 15px;
    }

    .nutrition-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      font-size: 0.9rem;
    }

    .nutrition-label {
      color: var(--light-text);
      font-weight: 500;
    }

    .nutrition-value {
      font-weight: 600;
    }

    .calories {
      color: #FF5722;
    }

    .protein {
      color: #2196F3;
    }

    .carbs {
      color: #FFC107;
    }

    .product-price {
      color: #E53935;
      font-weight: 700;
      font-size: 1.3rem;
      margin: 15px 0;
      text-align: center;
    }

    .add-to-cart {
      display: block;
      width: 100%;
      padding: 10px 0;
      background-color: var(--primary-green);
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 500;
      text-align: center;
      text-decoration: none;
      transition: background-color 0.3s;
      font-size: 1rem;
    }

    .add-to-cart:hover {
      background-color: var(--dark-green);
    }

    @media (max-width: 768px) {
      .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      }
    }

    @media (max-width: 480px) {
      .products-grid {
        grid-template-columns: 1fr;
      }

      .product-image {
        height: 200px;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <h1 class="page-title">健康食品</h1>

  <div class="products-grid">
    <!-- 食谱1 -->
    <div class="product-card">
      <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.ECRsWGQeASZbzqrgY-dHuAHaFj?w=244&h=183&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3" class="product-image">
      <div class="product-info">
        <h3 class="product-name">藜麦蔬菜沙拉</h3>
        <p class="product-description">富含蛋白质和纤维的健康沙拉，适合健身人士和减肥人群。</p>

        <div class="nutrition-info">
          <div class="nutrition-item">
            <span class="nutrition-label">总热量</span>
            <span class="nutrition-value calories">320 kcal</span>
          </div>
          <div class="nutrition-item">
            <span class="nutrition-label">蛋白质</span>
            <span class="nutrition-value protein">18g</span>
          </div>
          <div class="nutrition-item">
            <span class="nutrition-label">碳水化合物</span>
            <span class="nutrition-value carbs">35g</span>
          </div>
        </div>

        <div class="product-price">¥28.0</div>
        <a href="#" class="add-to-cart">加入购物车</a>
      </div>
    </div>

    <!-- 食谱2 -->
    <div class="product-card">
      <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.UM7o1gRXYD_qpV_Hhwzb1QHaGP?w=221&h=186&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3" class="product-image">
      <div class="product-info">
        <h3 class="product-name">香煎鸡胸肉套餐</h3>
        <p class="product-description">低脂高蛋白的健身餐，搭配时令蔬菜和糙米饭。</p>

        <div class="nutrition-info">
          <div class="nutrition-item">
            <span class="nutrition-label">总热量</span>
            <span class="nutrition-value calories">450 kcal</span>
          </div>
          <div class="nutrition-item">
            <span class="nutrition-label">蛋白质</span>
            <span class="nutrition-value protein">42g</span>
          </div>
          <div class="nutrition-item">
            <span class="nutrition-label">碳水化合物</span>
            <span class="nutrition-value carbs">30g</span>
          </div>
        </div>

        <div class="product-price">¥35.0</div>
        <a href="#" class="add-to-cart">加入购物车</a>
      </div>
    </div>

    <!-- 食谱3 -->
    <div class="product-card">
      <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Uazf0-xHTSdeYAJWTkCCZQHaE7?w=287&h=192&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3" class="product-image">
      <div class="product-info">
        <h3 class="product-name">超级食物素食碗</h3>
        <p class="product-description">包含牛油果、藜麦、坚果等多种超级食物的素食选择。</p>

        <div class="nutrition-info">
          <div class="nutrition-item">
            <span class="nutrition-label">总热量</span>
            <span class="nutrition-value calories">380 kcal</span>
          </div>
          <div class="nutrition-item">
            <span class="nutrition-label">蛋白质</span>
            <span class="nutrition-value protein">15g</span>
          </div>
          <div class="nutrition-item">
            <span class="nutrition-label">碳水化合物</span>
            <span class="nutrition-value carbs">40g</span>
          </div>
        </div>

        <div class="product-price">¥32.0</div>
        <a href="#" class="add-to-cart">加入购物车</a>
      </div>
    </div>

    <!-- 食谱4 -->
    <div class="product-card">
      <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.1IuduRb2WBMuzz3RUsdwAQHaEJ?w=280&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3" class="product-image">
      <div class="product-info">
        <h3 class="product-name">烤三文鱼配蔬菜</h3>
        <p class="product-description">烤三文鱼配蔬菜</p>

        <div class="nutrition-info">
          <div class="nutrition-item">
            <span class="nutrition-label">总热量</span>
            <span class="nutrition-value calories">420 kcal</span>
          </div>
          <div class="nutrition-item">
            <span class="nutrition-label">蛋白质</span>
            <span class="nutrition-value protein">35g</span>
          </div>
          <div class="nutrition-item">
            <span class="nutrition-label">碳水化合物</span>
            <span class="nutrition-value carbs">20g</span>
          </div>
        </div>

        <div class="product-price">¥45.0</div>
        <a href="#" class="add-to-cart">加入购物车</a>
      </div>
    </div>

    <!-- 食谱5 -->
    <div class="product-card">
      <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.ZyWIEtcvNtziGChNXmU8uAHaHa?w=199&h=199&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3" class="product-image">
      <div class="product-info">
        <h3 class="product-name">高蛋白燕麦早餐</h3>
        <p class="product-description">添加蛋白粉和坚果的健康早餐，提供持久能量。</p>

        <div class="nutrition-info">
          <div class="nutrition-item">
            <span class="nutrition-label">总热量</span>
            <span class="nutrition-value calories">350 kcal</span>
          </div>
          <div class="nutrition-item">
            <span class="nutrition-label">蛋白质</span>
            <span class="nutrition-value protein">25g</span>
          </div>
          <div class="nutrition-item">
            <span class="nutrition-label">碳水化合物</span>
            <span class="nutrition-value carbs">45g</span>
          </div>
        </div>

        <div class="product-price">¥22.0</div>
        <a href="#" class="add-to-cart">加入购物车</a>
      </div>
    </div>

    <!-- 食谱6 -->
    <div class="product-card">
      <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.FPENw5WWPzhNlbvrOU-58gHaE7?w=275&h=183&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3" class="product-image">
      <div class="product-info">
        <h3 class="product-name">蔬菜豆腐卷</h3>
        <p class="product-description">低卡路里的素食选择，富含植物蛋白和膳食纤维。</p>

        <div class="nutrition-info">
          <div class="nutrition-item">
            <span class="nutrition-label">总热量</span>
            <span class="nutrition-value calories">280 kcal</span>
          </div>
          <div class="nutrition-item">
            <span class="nutrition-label">蛋白质</span>
            <span class="nutrition-value protein">18g</span>
          </div>
          <div class="nutrition-item">
            <span class="nutrition-label">碳水化合物</span>
            <span class="nutrition-value carbs">30g</span>
          </div>
        </div>

        <div class="product-price">¥25.0</div>
        <a href="#" class="add-to-cart">加入购物车</a>
      </div>
    </div>

    <!-- 食谱7 -->
    <div class="product-card">
      <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.UL0hpjUuLpb2wkmT872ljQHaE7?w=252&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3" class="product-image">
      <div class="product-info">
        <h3 class="product-name">瘦牛肉健身餐</h3>
        <p class="product-description">优质蛋白质来源，搭配红薯和西兰花。</p>

        <div class="nutrition-info">
          <div class="nutrition-item">
            <span class="nutrition-label">总热量</span>
            <span class="nutrition-value calories">480 kcal</span>
          </div>
          <div class="nutrition-item">
            <span class="nutrition-label">蛋白质</span>
            <span class="nutrition-value protein">40g</span>
          </div>
          <div class="nutrition-item">
            <span class="nutrition-label">碳水化合物</span>
            <span class="nutrition-value carbs">35g</span>
          </div>
        </div>

        <div class="product-price">¥38.0</div>
        <a href="#" class="add-to-cart">加入购物车</a>
      </div>
    </div>

    <!-- 食谱8 -->
    <div class="product-card">
      <img src="" class="product-image">
      <div class="product-info">
        <h3 class="product-name">抗氧化水果碗</h3>
        <p class="product-description">多种浆果和坚果组合，富含抗氧化物质。</p>

        <div class="nutrition-info">
          <div class="nutrition-item">
            <span class="nutrition-label">总热量</span>
            <span class="nutrition-value calories">300 kcal</span>
          </div>
          <div class="nutrition-item">
            <span class="nutrition-label">蛋白质</span>
            <span class="nutrition-value protein">8g</span>
          </div>
          <div class="nutrition-item">
            <span class="nutrition-label">碳水化合物</span>
            <span class="nutrition-value carbs">50g</span>
          </div>
        </div>

        <div class="product-price">¥28.0</div>
        <a href="#" class="add-to-cart">加入购物车</a>
      </div>
    </div>
  </div>
</div>
</body>
</html>